import React, { PureComponent } from 'react'
import { Modal, Table } from 'antd'
import { connect } from 'dva';
import PropTypes from 'prop-types'
import PateoStandardTable from '@/common/PateoTable/PateoStandardTable'
import PateoSearchNewForm from '@/common/PateoTable/PateoSearchForm/PateoSearchNewForm'
import * as G from '@/utils/common'
import moment from 'moment';
import { downloadFileByUrl } from "@/utils/utils";
import { Form } from '@ant-design/compatible';
import enums from '../creditCar/enums';

@connect((state) => ({
  theme: state.theme,
  mileage: state.mileage,
}))
@Form.create()
export default class ExportTaskModal extends PureComponent {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.object,
  }
  state = {
    formValues: {},
    initFlag: false,
    visible: false,
    tableLoading: false,
    curPage: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    taskType: 'MsCreditBusinessVehicleMileageReportExport',
  }

  componentDidMount() {
    const { dispatch, onRef } = this.props;
    onRef(this);
    // this.initData()
  }

  initData = () => {
    const { dispatch } = this.props;
    this.setState({
      tableLoading: true,
    });
    const { curPage, pageSize, taskType } = this.state;
    dispatch({
      type: 'mileage/getDataWithRes',
      payload: {
        url: '/mscreditbusiness/exporttask/page', 
        ...{ page: curPage, size: pageSize, taskType: taskType },
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          if (
            response.data.rows.length === 0 &&
            response.data.pagination.current > 1
          ) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.initData();
              }
            );
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            });
          }
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    })
  }
  
  openModal = () => {
    this.setState({ visible: true });
  };

  closeModal = () => {
    this.setState({
      visible: false,
    });
  }

  render() {
    const { visible, taskType, tableLoading,tableData,curPage,pageSize,total, } = this.state;

    const columns = [
      {
        title: '导出时间',
        dataIndex: 'createDate',
        render: (text) => {
          return text != null ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
        },
      },
      {
        title: '统计周期',
        dataIndex: 'rangeTime',
        render: (text, record) => {
          if (JSON.parse(record.request)){
            const type = JSON.parse(record.request).totalPeriodType
            if (type === 0){
              const startTime = JSON.parse(record.request).startTime
              const endTime = JSON.parse(record.request).endTime
              return startTime+'至'+endTime
            } else if (type === 2){
              return '本周'
            } else if (type === 4){
              return '本月'
            } else if (type === 5){
              return '上周'
            } else if (type === 8){
              return '上月'
            } else {
              const startTime = JSON.parse(record.request).startTime
              const endTime = JSON.parse(record.request).endTime
              return startTime+'至'+endTime
            }
          } else {
            return ''
          }
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        render: (text, record) => {
          let findText = enums.taskStatus.array.find((e) => e.value === text);
          return findText ? findText.label : text;
        },
      },
      {
        title: '导出结果',
        dataIndex: 'url',
        render: (text, record) => {
          if (text){
            const type = JSON.parse(record.request).totalPeriodType
            if (type === 0){
              const startTime = JSON.parse(record.request).startTime
              const endTime = JSON.parse(record.request).endTime
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-'+startTime+'至'+endTime+'.csv')}}>文件下载</a> : '';
            } else if (type === 2){
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-本周.csv')}}>文件下载</a> : '';
            } else if (type === 4){
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-本月.csv')}}>文件下载</a> : '';
            } else if (type === 5){
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-上周.csv')}}>文件下载</a> : '';
            } else if (type === 8){
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-上月.csv')}}>文件下载</a> : '';
            } else{
              const startTime = JSON.parse(record.request).startTime
              const endTime = JSON.parse(record.request).endTime
              return text != null ? <a onClick={()=> {downloadFileByUrl(text, '授信车辆里程-'+startTime+'至'+endTime+'.csv')}}>文件下载</a> : '';
            }
          } else {
            return ''
          }
        },
      },
    ];
    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>;
      },
    };
    // const tableProps = {
    //   rowKey: record => record.sid,
    //   columns,
    //   dataSource: initFlag ? list : [],
    //   size: 'small',
    //   // loading,
    //   pagination: G.paginationProps(pagination),
    //   scroll:{ x: "100%"},
    // };
    
    const tableProps = {
      columns,
      size: "small",
      pagination,
      rowKey: "sid",
      scroll: { x: "max-content" },
      loading: tableLoading,
      dataSource: tableData,
      onChange: (pagination) => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.initData();
          }
        );
      },
    };
    return (
      <Modal
        visible={visible}
        onCancel={() => this.closeModal()}
        title='导出任务列表'
        width='70%'
      >
        <Table {...tableProps} />
      </Modal>

    )
  }
}
